<template>
    <div class="main-body">
      <!--工具栏-->
      <div class="toolbar">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="filters.operator" :placeholdre="t('thead.operator')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" perms="sys:logs:view" type="primary" @click="findPage">
              {{t('action.search')}}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--表格内容栏-->
      <cm-table
      ref="tableRef"
      :get-page="listPage"
      :filters="filters"
      :columns="columns"
      :showOperation="false"
      :showBatchDelete="false"
      ></cm-table>
    </div>
</template>
<script setup>
import {listPage} from '@/api/logs-operation.js'
import {useI18n} from "vue-i18n";
const {t}= useI18n();
const tableRef = ref();
const filters = reactive({
  operator: ''
});
const columns = computed(()=>[
  { prop: "id", label: t("thead.ID"), minWidth: 60 },
  { prop: "operator", label: t("thead.operator"), minWidth: 100 },
  { prop: "ip", label: t("thead.IP"), minWidth: 120 },
  { prop: "operation", label: t("thead.operation"), minWidth: 180 },
  { prop: "duration", label: t("thead.duration"), minWidth: 80 },
  { prop: "createdTime", label: t("thead.operateTime"), minWidth: 120 }
])

// 获取分页数据
const findPage = () => {
  tableRef.value.reload()
}
</script>